<template>
  <!-- 侧边栏 -->
  <el-aside :width="store.isCollapse ? '180px' : '64px' " style="height: 100vh;">
    <el-scrollbar>
      <el-menu
        router
        class="el-menu-vertical-demo"
        default-active="3"
        active-text-color="#ffd04b"
        background-color="#253d53"
        text-color="#fff"
        :collapse="!store.isCollapse"
        :collapse-transition="false"
      >
      <div style="height: 60px;line-height: 60px;text-align: center" @click="$router.push('/home')">
        <div style="cursor: pointer">
          <img src="https://s1.ax1x.com/2022/11/19/zKJyxH.png" style="width: 35px;position: relative;top: 9px;margin-right: 5px">
          <span style="color: #fff" v-show="store.isCollapse">唯忆-后台管理</span>
        </div>
      </div>
        <!-- 一级菜单 -->
        <el-menu-item v-for="item in noChildren()" :key="item.path" :index="item.path">
          <el-icon>
              <component class="icons" :is="item.icon" />
            </el-icon>
          <template #title>
            {{item.label}}
          </template>
        </el-menu-item>

        <!-- 多级菜单 -->
        <el-sub-menu v-for="item in hasChildren()" :key="item.path" :index="item.path">
          <template #title>
            <el-icon>
              <component class="icons" :is="item.icon"/>
            </el-icon>
            <span>
            {{item.label}}
            </span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
              <el-icon>
              <component class="icons" :is="child.icon"/>
            </el-icon>{{child.label}}
          </el-menu-item>
        </el-sub-menu>

      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script>
import {ref} from 'vue'
import {useIsCollapseStore} from "../store/useCollapseStore";
export default {
  name: 'CommonAside',
  setup() {
    const store = useIsCollapseStore()

    //菜单集合
    const menuList = [
        {
          path: '/home',
          name: 'home',
          label: '首页',
          icon: 'House',
          url: 'Home/Home'
        },
        {
          path:'/system',
          label: '系统管理',
          icon: 'Setting',
          children: [
            {
              path: '/user',
              name: 'user',
              label: '用户管理',
              icon: 'User',
              url: 'System/UserManage'
            },
            {
              path: '/tag',
              name: 'tag',
              label: '标签管理',
              icon: 'UserFilled',
              url: 'System/TagManage'
            }
          ]
        },
        {
          path:'/content',
          label: '内容管理',
          icon: 'Collection',
          children: [
            {
              path: '/article',
              name: 'article',
              label: '文章管理',
              icon: 'Tickets',
              url: 'content/ArticleManage'
            },
            {
              path: '/column',
              name: 'column',
              label: '专栏管理',
              icon: 'Memo',
              url: 'content/ColumnManage'
            }
          ]
        },
      // {
      //   path:'/comment',
      //   label: '评论管理',
      //   icon: 'ChatLineSquare',
      //   children: [
      //     {
      //       path: '/article/comment',
      //       name: 'articleComment',
      //       label: '文章评论',
      //       icon: 'ChatDotSquare',
      //       url: 'comment/ArticleCommentManage'
      //     },
      //     {
      //       path: '/post/comment',
      //       name: 'postComment',
      //       label: '帖子评论',
      //       icon: 'ChatLineRound',
      //       url: 'comment/PostCommentManage'
      //     }
      //   ]
      // }
      //
      ]

    //判断没有二级菜单
    const noChildren = () => {
      return menuList.filter(v => !v.children)
    }
    //判断有二级菜单
    const hasChildren = () => {
      return menuList.filter(v => v.children)
    }


    return {
      noChildren,hasChildren,store
    }
  }

}
</script>

<style>
.el-menu{
  border-right: none;
}
</style>
